<template>

    <div class="mars-m-style">
        <blockIndexNavBar title="物品申领列表"></blockIndexNavBar>
        <van-row>
            <van-col span="16">
                <van-search
                    v-model="wupinName"
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                >
                </van-search>
            </van-col>
            <van-col span="8" class="search-btn">
                <van-button type="primary" size="small" @click="onSearch">搜索</van-button>
            </van-col>
        </van-row>

        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getData"
            >
                <lee-card v-for="item in dataList" :key="item._id">
                    <van-row>
                        <van-col span="12">办公用品名称</van-col>
                        <van-col span="12">{{ item.wupinName }}</van-col>
                    </van-row>
                    <van-row>
                        <van-col span="12">申请人</van-col>
                        <van-col span="12">{{ item.ture_name }}</van-col>
                    </van-row>
                    <van-row>
                        <van-col span="12">申请数量</van-col>
                        <van-col span="12">{{ item.number }}</van-col>
                    </van-row>
                    <van-row>
                        <van-col span="12">申请时间</van-col>
                        <van-col span="12">{{ tabformatDate(item) }}</van-col>
                    </van-row>
                    <van-row>
                        <van-col span="12">状态</van-col>
                        <van-col span="12">{{ getStatus(item) }}</van-col>
                    </van-row>
                    <!--          <van-cell-group>-->
                    <!--            <van-cell title="办公用品名称"-->
                    <!--                      :value="item.wupinName"-->
                    <!--            />-->
                    <!--            <van-cell title="申请人"-->
                    <!--                      :value="item.ture_name"-->
                    <!--            />-->
                    <!--          <van-cell title="申请数量"-->
                    <!--                    :value="item.number"-->
                    <!--          />-->
                    <!--          <van-cell title="申请时间"-->
                    <!--                    :value="tabformatDate(item)"-->
                    <!--          />-->
                    <!--          <van-cell title="状态"-->
                    <!--                    :value="getStatus(item)"-->
                    <!--          />-->
                    <!--          </van-cell-group>-->
                </lee-card>
            </van-list>
        </van-pull-refresh>
        <template>
            <div>
                <icons padding="10 10 60 10" class="icons-warp">
                    <div class="float-icon-item">
                        <img src="../../assets/logo.png" alt="" @click="handleIcons('claim')">
                    </div>
                </icons>
            </div>
        </template>
    </div>
</template>

<script>
import {Config} from "@/config/formDataOptions";
import blockIndexNavBar from "@/components/blockIndexNavBar";
import LeeCard from "@/uitl/card";
import icons from "@/components/s-icons/icons";
import {API_URL} from "@/config/urlInfo";

export default {
    name: "articleList",
    components: {
        LeeCard,
        blockIndexNavBar,
        icons
    },
    data() {
        return {
            wupinName: "",
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            dataList: []
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        // 点击按钮
        handleIcons(router) {
            console.log('router', router)
            this.$router.push({path: "/mobile/offices/claim/articleClaim"})
        },
        tabformatDate(item) {
            let data = item['date']
            if (data == null || data === '') {
                return null
            }
            let dt = new Date(data)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
        },
        getStatus(item) {
            if (item.status == 'claimFalse') {
                return '待审批'
            } else if (item.status == 'claimTrue') {
                return '已发放'
            } else if (item.status == 'claimError') {
                return '发放失败'
            } else {
                return '已拒绝'
            }
        },
        onSearch() {
            this.getData()
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.getData();
        },

        getData() {
            // Config.getDatas("/office/api/claim/claimList", {"wupinName": this.wupinName}, (res) => {
            Config.getDatas(API_URL.claimList, {"wupinName": this.wupinName}, (res) => {
                this.dataList = res.list
                this.loading = false;
                this.refreshing = false;
                if (this.dataList.length == 0 || this.dataList.length == res.total) {
                    this.finished = true;
                } else {
                    this.finished = false;
                }
            }, this)
        }
    }
}
</script>

<style scoped lang="less">
.search-btn {
    .van-button {
        width: 48%;
        margin-right: 1%;
    }

    background: #fff;
    text-align: center;
    padding: 11px 0;
}

.list-btn {
    .van-button {
        width: 45%;
        margin-right: 2%;
        float: right;
    }
}

.wt-card {
    margin: 0.4rem;
    background: #fff;
    overflow: hidden;
    border-radius: 0.3rem;
    padding: 0.4rem;
    box-shadow: 0 0 0.2rem #ccc;
    border-bottom: 0.1rem solid #ccc;
}


.icons-warp {
    border-radius: 25px;

    .float-icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 50px;
        height: 50px;

        img {
            width: 25px;
            height: 25px;
            margin-bottom: 3px;
        }

        span {
            font-size: 9px;
            color: #666666;
        }
    }
}


</style>
